<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base target="_self" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>材料价格信息</title>

<link rel="stylesheet" type="text/css"
    href="<c:url value="/static/jquery-jqplot/jquery.jqplot.css"/>" />
<link rel="stylesheet" type="text/css"
    href="<c:url value="/static/jquery-jqplot/examples/examples.css"/>" />
<script language="javascript" type="text/javascript"
    src="<c:url value="/static/jquery-jqplot/jquery-1.4.2.min.js"/>"></script>

<script language="javascript" type="text/javascript"
    src="<c:url value="/static/jquery-jqplot/jquery.jqplot.js"/>"></script>
<script language="javascript" type="text/javascript"
    src="<c:url value="/static/jquery-jqplot/plugins/jqplot.cursor.js"/>"></script>
<script language="javascript" type="text/javascript"
    src="<c:url value="/static/jquery-jqplot/plugins/jqplot.dateAxisRenderer.js"/>"></script>
<script language="javascript" type="text/javascript"
    src="<c:url value="/static/jquery-jqplot/plugins/jqplot.canvasTextRenderer.js"/>"></script>
<script language="javascript" type="text/javascript"
    src="<c:url value="/static/jquery-jqplot/plugins/jqplot.categoryAxisRenderer.js"/>"></script>
<script language="javascript" type="text/javascript"
    src="<c:url value="/static/jquery-jqplot/plugins/jqplot.pieRenderer.js"/>"></script>
<script language="javascript" type="text/javascript"
    src="<c:url value="/static/jquery-jqplot/plugins/jqplot.barRenderer.js"/>"></script>
<script language="javascript" type="text/javascript"
    src="<c:url value="/static/jquery-jqplot/plugins/jqplot.canvasAxisTickRenderer.js"/>"></script>
<script language="javascript" type="text/javascript"
    src="<c:url value="/static/jquery-jqplot/plugins/jqplot.highlighter.js"/>"></script>
<script type="text/javascript"
            src="<c:url value="/static/js/common.js"/>"></script>           

<script type="text/javascript" language="javascript">
    $(document).ready(
            function() {
                $.jqplot.config.enablePlugins = true;
                //明天 用json ！
                var InPr = '${checkVo.salesVolume }';
                if (typeof (InPr) == 'string' && InPr != '') {
                	InPr = JSON.parse(InPr);
                } 
                var finalVar = new Array();
                var finalVarSun1 = new Array();
                for ( var i in InPr) {
                    finalVarSun1.push([Number(InPr[i].value),Number(InPr[i].text)]);
				}  
                finalVar.push(finalVarSun1);
                
                var yaxismin = 0;//全部订单起始x坐标
                var y2axismin = 0;//支付订单起始x坐标
                var numberTicksmax = 10;//x坐标行数
                var ynumberTicksmax = 99;//x坐标行数

                plot1 = $.jqplot('chart1', finalVar, {
                    title : '销售数量图(${checkVo.timeTypeString })', //标题

                    seriesDefaults:{
                    	pointLabels: { 
                            show: true, 
                        },
                    	neighborThreshold:0,
                    	showMarker: true,
                    	markerOptions: {    
                            show: true,             // 是否在图中显示数据点  
                            style: 'filledCircle', // 各个数据点在图中显示的方式，默认是"filledCircle"(实心圆点),  
                                                    //其他几种方式circle，diamond, square, filledCircle，  
                                                    // filledDiamond or filledSquare.  
                            lineWidth: 2,       // 数据点各个的边的宽度（如果设置过大，各个边会重复，会显示的类似于实心点）  
                            size: 9,            // 数据点的大小  
                            color: '#666666',    // 数据点的颜色  
                            shadow: true,       // 是否为数据点显示阴影区（增加立体效果）  
                            shadowAngle: 45,    // 阴影区角度，x轴顺时针方向  
                            shadowOffset: 1,    // 参考grid中相同参数  
                            shadowDepth: 3,     //参考grid中相同参数  
                            shadowAlpha: 0.07   // 参考grid中相同参数  
                        }   
                    	
                    },// fill:true 阴影显示 注释掉后会显示点
                    series : [ 
                        {label:'${checkVo.materName }'},
                     ],
                    cursor : {
                        showVerticalLine : true,//是否显示竖线
                        showTooltip : true,//鼠标移动时是否显示订单量
                        followMouse : false,//订单量是否跟随鼠标移动，false显示在右下角，true随鼠标移动
                        showTooltipDataPosition : true,
                        zoom : false,//是否允许局部分析
                        intersectionThreshold : 6,
                        tooltipFormatString: '%s ${checkVo.timeTypeString }:%s, 数量:%s${checkVo.unit }'
                    },
                    highlighter : {
                        bringSeriesToFront : true,
                        tooltipLocation : 'e',
                        tooltipOffset : 0,
                        formatString : '<div class="jqplot-highlighter">%s${checkVo.timeTypeString }: <strong>%s${checkVo.unit }</strong></div>'
                    },
                    legend : {
                        show : true,//显示 全部订单 支付成功
                        location : 'nw'
                    },
                    axesDefaults : {
                    	//从后台设置多少周 
                        //ticks: ['1','2','3','4','5'] 

                    	//angle:40
                    	
                    },
                    axes : {
                        yaxis : {
                            min : yaxismin,
                            numberTicks : numberTicksmax,
                            tickOptions:{formatString:'%.2f '}
                        },//支付订单起始x坐标
                        xaxis : {
                        	rendererOptions : {
                                tickRenderer : $.jqplot.CanvasAxisTickRenderer
                            //日期要斜着显示，需要配置此项目
                            },
                            tickOptions:{
                            	formatString:'%.2f',
                            	angle:-40
                            	},
                            
                        }
                    }
                });
            });
</script>
</head>
<body>
    <div class="jqPlot" id="chart1" style="height: 95%; width: 95%;"></div>
</body>
</html>